<route lang="json5">
{
  style: {
    navigationBarTitleText: '确认订单',
    navigationBarBackgroundColor: '#018d71',
    navigationBarTextStyle: 'white',
  },
}
</route>

<template>
  <view class="order-confirm">
    <!-- 配送地址 -->
    <view class="address-section">
      <view class="address-header">
        <text class="address-title">配送地址</text>
        <text class="address-edit" @click="editAddress">修改</text>
      </view>
      <view class="address-info">
        <text class="address-name">{{ deliveryAddress.name }} {{ deliveryAddress.phone }}</text>
        <text class="address-detail">{{ deliveryAddress.address }}</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-section">
      <view class="order-title">订单信息</view>
      <view class="order-products">
        <view class="order-product" v-for="(item, index) in orderItems" :key="index">
          <image :src="item.image" class="product-image" mode="aspectFill" />
          <view class="product-info">
            <view class="product-name">{{ item.name }}</view>
            <view class="product-spec">{{ item.specText }}</view>
            <view class="product-quantity">数量：{{ item.quantity }}</view>
          </view>
          <view class="product-price">¥{{ item.price }}</view>
        </view>
      </view>
      <view class="order-summary">
        <view class="summary-item">
          <text>商品总价：</text>
          <text class="summary-price">¥{{ totalPrice.toFixed(2) }}</text>
        </view>
        <view class="summary-item">
          <text>配送费：</text>
          <text class="summary-price">¥{{ deliveryFee.toFixed(2) }}</text>
        </view>
        <view class="summary-item total">
          <text>合计：</text>
          <text class="total-price">¥{{ totalAmount.toFixed(2) }}</text>
        </view>
      </view>
    </view>

    <!-- 支付按钮 -->
    <view class="pay-section">
      <wd-button type="primary" class="pay-btn" @click="submitOrder">立即支付</wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useOrderStore } from '@/store/orderConfim'

// 获取订单store
const orderStore = useOrderStore()

// 配送地址
const deliveryAddress = ref({
  name: '张三',
  phone: '138****8888',
  address: '北京市朝阳区某某街道某某小区1号楼1单元101室',
})

// 支付方式
const paymentMethod = ref('微信支付')

// 从store获取订单数据
const orderItems = computed(() => orderStore.orderData.items)
const totalPrice = computed(() => orderStore.totalPrice)
const totalQuantity = computed(() => orderStore.totalQuantity)

// 配送费
const deliveryFee = ref(5.0)

// 计算总金额
const totalAmount = computed(() => {
  return totalPrice.value + deliveryFee.value
})

// 选择支付方式
const selectPaymentMethod = (method: string) => {
  paymentMethod.value = method
  orderStore.setPaymentMethod(method)
}

// 修改地址
const editAddress = () => {
  uni.showToast({
    title: '地址管理功能开发中',
    icon: 'none',
  })
}

// 提交订单
const submitOrder = () => {
  // 保存地址信息到store
  orderStore.setAddress(deliveryAddress.value)

  uni.showLoading({
    title: '正在提交订单...',
  })

  // 模拟提交订单
  setTimeout(() => {
    uni.hideLoading()
    uni.showModal({
      title: '订单提交成功',
      content: '您的订单已提交，请及时支付',
      showCancel: false,
      success: () => {
        // 清空订单数据
        orderStore.clearOrder()
        // 跳转到支付页面或订单列表
        uni.navigateBack()
      },
    })
  }, 2000)
}

onMounted(() => {
  console.log('订单确认页面加载完成')
  console.log('订单商品:', orderItems.value)
})
</script>

<style lang="scss" scoped>
.order-confirm {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 80px;
}

.address-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  .address-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    .address-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    .address-edit {
      font-size: 13px;
      color: #018d71;
    }
  }
  .address-info {
    .address-name {
      font-size: 15px;
      color: #222;
      margin-bottom: 4px;
      display: block;
    }
    .address-detail {
      font-size: 13px;
      color: #666;
    }
  }
}

.order-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  .order-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
  }
  .order-products {
    margin-bottom: 12px;
    .order-product {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .product-image {
        width: 64px;
        height: 64px;
        border-radius: 8px;
        margin-right: 12px;
        background: #f5f5f5;
      }
      .product-info {
        flex: 1;
        .product-name {
          font-size: 15px;
          color: #222;
          margin-bottom: 4px;
        }
        .product-spec {
          font-size: 13px;
          color: #888;
          margin-bottom: 4px;
        }
        .product-quantity {
          font-size: 13px;
          color: #888;
        }
      }
      .product-price {
        font-size: 16px;
        color: #ff4757;
        font-weight: 600;
        margin-left: 8px;
      }
    }
  }
  .order-summary {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 15px;
    .summary-item {
      margin-left: 8px;
      .summary-price {
        color: #ff4757;
        font-weight: 600;
        margin-left: 8px;
        font-size: 18px;
      }
    }
    .total-price {
      color: #ff4757;
      font-weight: 600;
      margin-left: 8px;
      font-size: 18px;
    }
  }
}

.pay-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  z-index: 100;
  .pay-btn {
    width: 100%;
    height: 48px;
    font-size: 18px;
    border-radius: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, #018d71, #00b894);
    border: none;
    box-shadow: 0 4px 12px rgba(1, 141, 113, 0.15);
  }
}
</style>
